<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from "vue";
import Sign from "../components/Sign.vue";
import SignFooter from "../components/SignFooter.vue";
import SignHeader from "../components/SignHeader.vue";
const mainRef = ref<HTMLDivElement | null>(null);
const signRef = ref<any>();
const strokeWidth = ref<number>(1);
const strokeStyle = ref<string>("#000");
const mainStyle = reactive({
  width: 0,
  height: 0,
});
const isEraser = ref<boolean>(false);

onMounted(() => {
  nextTick(() => {
    if (!mainRef.value) {
      return;
    }
    mainStyle.width = mainRef.value.clientWidth;
    mainStyle.height = mainRef.value.clientHeight;
  });
});

const handleClearCanvas = () => {
  if (!signRef.value) {
    return;
  }
  signRef.value.clearCanvas();
};

const handleSaveCanvas = () => {
  if (!signRef.value) {
    return;
  }
  signRef.value.saveCanvas();
};

const handleClearPartCanvas = () => {
  isEraser.value = true;
};
</script>

<template>
  <div class="sign-conatiner">
    <SignHeader />
    <div ref="mainRef" class="main">
      <Sign
        ref="signRef"
        :width="mainStyle.width"
        :height="mainStyle.height"
        :line-width="strokeWidth"
        :stroke-style="strokeStyle"
        v-model:eraser="isEraser"
        @on-mouseup="isEraser = false"
      />
    </div>
    <SignFooter
      @clear-canvas="handleClearCanvas"
      @change-color="strokeStyle = $event"
      @save-canvas="handleSaveCanvas"
      @change-width="strokeWidth = $event"
      @clear-part-canvas="handleClearPartCanvas"
    />
  </div>
</template>

<style lang="scss" scoped>
.sign-conatiner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main {
  flex: 1;
  overflow: hidden;
}
</style>
